<template>
  <transition name="slide">
    <div class="circle">
      <div class="circle-wrap">
        <div class="back">
          <div @click="back">
            <img src="../../../assets/返回.png" height="16" width="19" />
          </div>
          <span>我的相册</span>
        </div>
        <div class="content">
          <div class="content-wrapper" ref="wrapper">
            <div class="content-text">
              <div class="content-top">
                <img class="circle-bg" src="../../../assets/find/bg-1.png"/>
                <div class="user">
                  <span>蒙圈的喵</span>
                  <img src="../../../assets/me/minion.png" height="80" width="80"/>
                </div>
              </div>
              <div class="content-body">
                <div class="msg-list" v-for="(item, index) in info">
                  <div class="msg-head-img">
                    <img :src="item.imgurl">
                  </div>
                  <div class="msg-content">
                    <h2 v-html="item.dissname"></h2>
                    <ul>
                      <li v-if="item.album.length" v-for="(img,index) in item.album">
                        <img @click="clickImg($event)" :key="index" :src="img.url">
                        <!--<img v-preview="img.url"
                             :src="img.url"
                             :key="index"
                             preview-title-enable="true"
                             preview-nav-enable="true">-->
                      </li>
                    </ul>
                  </div>
                </div>
                <div style="text-align: center;opacity: 0.6;margin-top: 20px;">----没有更多动态了----</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <big-image v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-image>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'
  import bigImage from '../../../common/subcomponent/bigImage'

  export default {
    name:'album',
    components: {
      BScroll,
      bigImage
    },
    data () {
      return {
        showImg: false,
        imgSrc: [],
        info: [
          {
            dissname: '邓伦',
            imgurl: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2980592991,2084522472&fm=58&bpow=416&bpoh=416',
            album: [
              {
                url: 'https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=ac314cc83b4e251ff6faecaac6efa272/8694a4c27d1ed21be3f1c017a66eddc451da3f0c.jpg'
              }
            ]
          },
          {
            dissname: '迪丽热巴',
            imgurl: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1812610176,882127119&fm=58&bpow=640&bpoh=820',
            album: [
              {
                url: 'https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C930%2C1319%3Bh%3D195%3Bq%3D95/sign=ae3bd3fcc18065386fa5fe53aaed8d74/d058ccbf6c81800a24f0dfbcba3533fa828b476e.jpg'
              },
              {
                url: 'https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C930%2C1319%3Bh%3D195%3Bq%3D95/sign=790f6d7610d5ad6ebeb63eaabcfb15eb/267f9e2f07082838b4248aa6b399a9014c08f153.jpg'
              },
              {
                url: 'https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C930%2C1319%3Bh%3D195%3Bq%3D95/sign=6143a07ff7039245b5fabb4fbaa488f2/377adab44aed2e732959d09e8c01a18b86d6fad4.jpg'
              },
              {
                url: 'https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C930%2C1320%3Bh%3D195%3Bq%3D95/sign=f236a89142540923be26393eaf68fd39/c995d143ad4bd1130c77e18051afa40f4afb05cd.jpg'
              },
              {
                url: 'https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C930%2C1319%3Bh%3D195%3Bq%3D95/sign=61a5a07ff7039245b5fabb4fbaa488f2/377adab44aed2e7329bfd09e8c01a18b87d6fa2a.jpg'
              },
              {
                url: 'https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C0%2C930%2C1319%3Bh%3D195%3Bq%3D95/sign=2c5a3a6c366d55fbd1892c665012637a/4a36acaf2edda3cc7614ee920ae93901203f928b.jpg'
              }
            ]
          },
          {
            dissname: '王一博',
            imgurl: 'https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=ab9143bada43ad4bb2234e92e36b31ca/f703738da9773912c1b93b7ef3198618367ae216.jpg',
            album: [
              {
                url: 'https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=e90c38903ea85edfee81f671283d6246/3ac79f3df8dcd100ef9ca9e1788b4710b8122fe9.jpg'
              },
              {
                url: 'https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=b149153f31c79f3d9becec62dbc8a674/7a899e510fb30f243ad3bcc3c295d143ac4b03a0.jpg'
              }
            ]
          },
          {
            dissname: '黄景瑜',
            imgurl: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=467768343,1640436897&fm=58&bpow=500&bpoh=673',
            album: [
              {
                url: 'http://t11.baidu.com/it/u=180044911,896765672&fm=173&app=25&f=JPEG?w=640&h=967&s=8033CF364D5273C466FC51CA030070B2'
              },
              {
                url: 'http://t10.baidu.com/it/u=783415572,1540164959&fm=173&app=25&f=JPEG?w=640&h=969&s=8060DF16431247C454F521CE030080B3'
              },
              {
                url: 'http://t10.baidu.com/it/u=3413917767,2479636133&fm=173&app=25&f=JPEG?w=640&h=976&s=8060DF104D0276C0106C81DC0300C0A1'
              },
              {
                url: 'http://t10.baidu.com/it/u=1455121149,2273921481&fm=173&app=25&f=JPEG?w=640&h=994&s=8860CF104F034EC02C547CCE0300E0B0'
              }
            ]
          }
        ]
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.wrapper, {
          click: true
        })
      })
    },
    methods: {
      back () {
        this.$router.back()   // 返回上一级
      },
      admire (item) {
        // console.log(item)
        item.num += 1
      },
      clickImg (e) {
        // console.log(e)
        this.showImg = true
        // 获取当前图片地址
        // this.imgSrc = e.currentTarget.src
        this.imgSrc = e.path[0].currentSrc
        // console.log(this.imgSrc)
      },
      viewImg () {
        this.showImg = false
      }
    }
  }
</script>

<style scoped>
  .circle {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 203;
    background-color: rgba(238, 233, 233, 1);
  }

  .back {
    background: #1e2b39;
    height: 50px;
    color: #fff;
    position: fixed;
    width: 100%;
    z-index: 99;
  }

  .back div {
    height: 50px;
    width: 50px;
  }

  .back img {
    position: absolute;
    top: 25px;
    margin-top: -8px;
    left: 14px;
  }

  .back span {
    position: absolute;
    font-size: 20px;
    top: 25px;
    margin-top: -10px;
    left: 50px;
    padding-left: 10px;
    border-left: 1px solid #000;
  }

  .content {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .content-wrapper {
    height: 100%;
    overflow: hidden;
  }

  .content-top {
    position: relative;
  }

  .circle-bg {
    width: 100%;
    margin-bottom: 20px;
  }

  .user {
    position: absolute;
    bottom: 0px;
    right: 10px;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .user span {
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 20px;
    margin-right: 10px;
  }

  .user img {
    border: 2px solid #fff;
  }

  /*朋友圈内容部分样式*/
  .content-body {
    width: 100%;
    padding: 10px;
  }

  .msg-list {
    width: 95%;
    /*position: relative;*/
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #adadad;
    margin-top: 10px;
    top: 0;
  }

  .msg-head-img {
    background: paleturquoise;
    width: 50px;
    height: 50px;
  }

  .msg-head-img img {
    width: 100%;
    height: 100%;
  }

  .msg-content {
    width: 85%;
  }

  .msg-content h2 {
    color: blue;
    font-family: '\6977\4F53';
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 10px 0;
  }

  .msg-content ul{
    padding: 0 0 20px 0;
  }
  .msg-content ul li {
    width: 96px;
    height: 96px;
    display: inline-block;
    padding: 2px;
  }

  .msg-content ul li img {
    width: 100%;
    height: 100%;
  }

  .slide-enter-active, .slide-leave-active {
    transition: all 0.3s;
  }

  .slide-enter, .slide-leave-to {
    transform: translate3d(100%, 0, 0);
  }

</style>
